<template>
  <div class="swiper">
    <swiper 
      :indicator-dots="true"
      :autoplay="true" 
      indicator-color="#ccc"
      indicator-active-color="#ea5149"
      interval="5000" 
      duration="1000">
      <div :key="imgindex" v-for="(top, imgindex) in imgUrls">
        <swiper-item>
          <image 
            @click="bookDetail(img.id)"
            mode='aspectFit' 
            :key="img.id" 
            v-for="img in top" 
            :src="img.image" 
            class="slide-image"/>
        </swiper-item>
      </div>
    </swiper>
  </div>
</template>

<script>
export default {
  props:['tops'],
  computed:{
    imgUrls(){
      const res = this.tops
      console.log([res.slice(0,3),res.slice(3,6),res.slice(6)])
      return [res.slice(0,3),res.slice(3,6),res.slice(6)]
    }
  },
  methods:{
     bookDetail (id) {
      wx.navigateTo({
        url: '/pages/detail/main?id=' + id
      })
    }
  }
}
</script>

<style lang='scss'>
.swiper{
  margin-top: 5px;
  .slide-image{
    width: 33%;
    height: 250rpx;
  }
}
</style>
